<template>
	<view class="bg-black-1">
		<canvas canvas-id="canvasId" id='canvasId' :disable-scroll='true' style="width: 100vw;height: 79vh;"
			@touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd"></canvas>

		<view class="vh-20 box-sizing  bg-white pb-safe-area">
			<view class="px-12 h-50 py-5  bg-item box-sizing">
				<view class="grid-columns-8 flex " v-if='type==1'>
					<view class="w-30 h-30 round-circle " :style="`background-color: ${item};`"
						v-for="(item,index) in colorList" :key='index' @click="background=item;setBackground(item)">
					</view>
				</view>
				<view class="grid-columns-8 " v-if='type==2'>
					<view class="w-30 h-30 round-circle" :style="`background-color: ${item};`"
						v-for="(item,index) in colorList" :key='index' @click="textColor=item;"></view>
				</view>
				<view v-if='type==3' class="flex flex-y-center grid-gap-12">
					<view class="flex-1">
						<slider min="1" max="40" step="1" block-size="12" activeColor="#0073FF" block-color="#0073FF"
							backgroundColor="#D8D8D8" :value="lineWidth" @changing="sliderChange"
							@change="sliderChange">
						</slider>
					</view>
					<text class="text-white fs-13">{{lineWidth}}px</text>
				</view>
			</view>
			<view class="flex p-4 flex-x-space-around flex-y-center  text-blue">
				<view class="flex flex-column flex-y-center p-6 round-6" :class='type==1?"bg-item-1":""'
					@click="type=1">
					<text class="iconfont icon-beijingse fs-25"></text>
					<text class="fs-11">背景色</text>
				</view>
				<view class="flex flex-column flex-y-center p-6 round-6" :class='type==2?"bg-item-1":""'
					@click="type=2">
					<text class="iconfont icon-wenziyanse fs-25"></text>
					<text class="fs-11">文字颜色</text>
				</view>
				<view class="flex flex-column flex-y-center p-6 round-6" :class='type==3?"bg-item-1":""'
					@click="type=3">
					<text class="iconfont icon-wenzidaxiao2 fs-25"></text>
					<text class="fs-11">文字大小</text>
				</view>
				<view class="flex flex-column flex-y-center py-6 px-10 round-6 click-item" @click="withdraw">
					<text class="iconfont icon-chehui fs-25"></text>
					<text class="fs-11">撤回</text>
				</view>
				<view class="flex flex-column flex-y-center p-6 round-6 click-item" @click="background='#fff';init()">
					<text class="iconfont icon-qingkong_huaban1 fs-25"></text>
					<text class="fs-11">清空画板</text>
				</view>
				<view>
					<view @click="save" class="bg-blue text-white fs-13 px-12 py-6 round-8">保存</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	function Rectangle(x, y, width, height, color) {
		const draw = () => {
			ctx.fillStyle = color;
			ctx.fillRect(x, y, width, height);
		}
		return {
			x,
			y,
			width,
			height,
			color,
			draw
		}
	}

	function Line(x, y, color, width) {
		let paths = [];
		let oldX;
		let oldY;
		paths.push({ x: x, y: y });
		const push = (x, y) => {
			paths.push({ x: x, y: y });
		}
		const beginPath = () => {
			ctx.beginPath();
			ctx.strokeStyle = color;
			ctx.lineWidth = width;
			ctx.lineCap = "round";
		}
		const stroke = (x, y) => {
			ctx.moveTo(oldX, oldY);
			ctx.lineTo(x, y);
			ctx.stroke();
			oldX = x;
			oldY = y;
			paths.push({ x: x, y: y });
		}
		const draw = () => {
			beginPath();
			ctx.moveTo(paths[0].x, paths[0].y);
			paths.forEach((path) => {
				ctx.lineTo(path.x, path.y);
			})
			ctx.stroke();
		}
		return {
			paths,
			color,
			push,
			beginPath,
			stroke,
			draw
		}
	}
	import { onLoad, onReady } from '@dcloudio/uni-app'
	import { reactive, ref, getCurrentInstance } from 'vue';
	import {  $page } from '@/utils'
	const system = uni.getSystemInfoSync()
	const colorList = reactive(
		[
			'#f44336', '#ff5722', '#ffc107', '#4caf50',
			'#00bcd4', '#2196f3', '#ffffff', '#000000'
		])
	const background = ref('#fff')
	const lineWidth = ref(6)
	const textColor = ref('#000')
	const type = ref(1)
	var ctx = null;
	const status = ref(true)
	const startArr = ref({ x: 0, y: 0 })
	const endArr = ref({ x: 0, y: 0 })

	onReady(() => {
		ctx = uni.createCanvasContext('canvasId')
		init()
	})
	const init = () => {
		shapes = []
		setBackground()
	}
	let temp;
	let shapes = [];
	const setBackground = () => {
		shapes[0] = new Rectangle(0, 0, system.windowWidth, system.windowHeight * 0.8, background.value);
		shapes.forEach((shape) => {
			shape.draw();
		})
		ctx.draw()
	}
	const drawStart = (e) => {
		temp = new Line(e.touches[0].x, e.touches[0].y, textColor.value, lineWidth.value);
		shapes.push(temp);
		temp.beginPath()
		startArr.value.x = e.touches[0].x
		startArr.value.y = e.touches[0].y
	}
	const drawMove = (e) => {
		temp.push(e.touches[0].x, e.touches[0].y);
		endArr.value.x = e.touches[0].x
		endArr.value.y = e.touches[0].y
		draw()
	}
	const drawEnd = (e) => {
		temp = null;
		startArr.value = []
		endArr.value = []
	}
	const draw = () => {
		ctx.moveTo(startArr.value.x, startArr.value.y);
		ctx.lineTo(endArr.value.x, endArr.value.y);
		ctx.stroke();
		ctx.draw(true);
		startArr.value = endArr.value
		endArr.value = []
	}
	const sliderChange = (e) => {
		lineWidth.value = e.detail.value
	}
	const save = () => {
		uni.canvasToTempFilePath({
			canvasId: 'canvasId',
			success(res) {
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.url = res.tempFilePath
				$page.back()
				return true;
			}
		})
	}
	const withdraw = () => {
		if (shapes.length > 1) {
			shapes.pop()
			shapes.forEach((shape) => {
				shape.draw();
			})
			ctx.draw()
		}
	}
</script>

<style>
	.bg-item {
		background: rgba(0, 0, 0, 0.5);
	}

	.bg-item-1 {
		background: rgba(0, 0, 0, 0.1);
	}

	.click-item:active {
		background: rgba(0, 0, 0, 0.1);
	}
</style>